<template>
	<view class="page-member-course-code">
		<text class="member-course-title">进场请出示二维码</text>
		<uni-qrcode ref="uqrcode" cid="course" :text="checkUrl" />
		<text class="course-name">{{courseName}}</text>
		<!-- <text class="course-code">签到码：2021</text> -->
		<!-- <text class="course-time">{{courseTime}}</text> -->
		<view class="course-coach">授课：{{courseCoach}}</view>
	</view>
</template>

<script>
	import UniQrcode from '@/components/common/uni-qrcode'
	import * as courseApi from '@/api/course.js'
	export default {
		components: {
			UniQrcode
		},
		props: {
			
		},
		data() {
			return {
				orderId: 0,
				courseName: '', 
				courseTime: '', 
				courseCoach: '',
				codeToken: 0
			};
		},
		computed: {
			checkUrl() {
				const { protocol, host, pathname } = window.location
				return `${protocol}//${host}${pathname}/#/pages/mine/check-course?orderId=${this.orderId}&token=${this.codeToken}`
			}
		},
		onLoad(options) {
			const { orderId, courseName, courseTime, courseCoach } = options
			this.orderId = orderId
			this.courseName = courseName
			this.courseTime = courseTime
			this.courseCoach = courseCoach
			this.getCodeToken(orderId)
		},
		methods: {
			getCodeToken(orderId) {
				courseApi.getCodeToken().then(res => {
					this.codeToken = res.data.codeToken
					this.$nextTick(() => {
						console.log(this.checkUrl)
						this.$refs.uqrcode.make()
					})
				})
			}
		}
	}
</script>

<style scoped lang="scss">
@import '@/common/scss/var.scss';
.page-member-course-code{
	display: flex;
	flex-direction: column;
	align-items: center;
	font-family: $font-family;
	color: $color-title;
	.member-course-title{
		margin-top: 92rpx;
		font-size: 18px;
		font-weight: bold;
		margin-bottom: 80rpx;
	}
	
	.course-name{
		margin-top: 70rpx;
		font-size: 16px;
		font-weight: bold;
		margin-bottom: 44rpx;
	}
	
	.course-code, .course-time, .course-coach{
		text-align: justify;
		padding: 0 50rpx;
		line-height: 1.5;
		font-size: 16px;
		margin-bottom: 44rpx;
	}
}
</style>
